<template>
  <q-dialog class="send-sure-dialog dialog" v-model="show" persistent>
    <q-card v-drag style="min-width: 400px" class="no-shadow">
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">文件发送确认</div>
      </q-card-section>
      <q-card-section class="text-center notice">
        {{notice}}
        <span v-if="sender.source==='machine'||acceptor.source==='machine'"
              class="block font-size-12 margin-t-10">（注意：机床不支持文件夹操作）</span>
      </q-card-section>
      <q-card-section class="send-sure-content">
        <q-card style="width: 200px">
          <q-card-section class="dialog-title card-title bg-secondary text-white">发送方：{{sendLabel}}</q-card-section>
          <q-scroll-area style="height: 160px; width: 200px;" :thumb-style="thumbStyle">
            <q-card-section class="file" style="min-height: 158px; width: 200px;">
              <ul class="file-list">
                <li v-for="(item, index) in sender.data" :key="index">
                  <span class="ellipsis">{{item.label}}</span>
                  <q-icon name="iconfont icontubiao-67" @click="removeItem('send', item)"></q-icon>
                  <q-tooltip self="center middle">{{item.label}}</q-tooltip>
                </li>
              </ul>
            </q-card-section>
          </q-scroll-area>
        </q-card>
        <img class="arrows" src="statics/img/arrows.png">
        <q-card style="width: 200px">
          <q-card-section class="dialog-title card-title bg-primary text-white">接收方：{{acceptLabel}}</q-card-section>
          <q-scroll-area style="height: 160px; max-width: 200px;" :thumb-style="thumbStyle">
            <q-card-section class="file" style="min-height: 158px; width: 200px;">
              <ul class="file-list">
                <li v-for="(item, index) in acceptor.data" :key="index" class="border-primary">
<!--                  <span class="ellipsis">{{acceptor.source==='cloud'&&item.path.length===0?'所有文件/':item.path}}</span>-->
                  <span class="ellipsis">{{getCloudUrl(item)}}</span>
                  <q-icon name="iconfont icontubiao-67" @click="removeItem('accept', item)"></q-icon>
                  <q-tooltip v-if="item.path.length!==0" self="center middle">{{item.path}}</q-tooltip>
                </li>
              </ul>
            </q-card-section>
          </q-scroll-area>
        </q-card>
      </q-card-section>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn class="btn q-mr-md" outline label="取消" color="primary" @click="hideDialog" />
        <q-btn class="btn" unelevated label="确认" color="primary" @click="submit" />
      </div>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'send-sure-dialog',
  props: {
    // 发送方
    sender: {
      type: Object,
      default () {
        return {
          source: '',
          data: []
        }
      }
    },
    // 接收方
    acceptor: {
      type: Object,
      default () {
        return {
          source: '',
          data: []
        }
      }
    }
  },
  computed: {
    // 说明文字
    notice () {
      let message = `是否确认将${this.sender.data.length}个文件发送到`
      switch (this.acceptor.source) {
        case 'cloud':
          message = message + '云端?'
          break
        case 'local':
          message = message + '本地?'
          break
        case 'machine':
          message = message + this.acceptor.data.length + '台设备?'
          break
      }
      return message
    },
    // 发送方名字
    sendLabel () {
      let message = ''
      switch (this.sender.source) {
        case 'cloud':
          message = '云端'
          break
        case 'local':
          message = '本地'
          break
        case 'machine':
          message = '设备文件'
          break
      }
      return message
    },
    acceptLabel () {
      let message = ''
      switch (this.acceptor.source) {
        case 'cloud':
          message = '云端'
          break
        case 'local':
          message = '本地'
          break
        case 'machine':
          message = '设备文件'
          break
      }
      return message
    }
  },
  data () {
    return {
      show: false,
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    // 显示弹框
    showDialog () {
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (info) {
    },
    /**
     * 移除左侧或右侧某一项
     * postion 值为send or accept
     **/
    removeItem (postion, item) {
      this.$emit('removeItem', postion, item)
    },
    // 提交
    submit () {
      // 程序传输埋点
      // if (this.sender.source === 'local' && this.acceptor.source === 'cloud') {
      //   this.addStat(this.CommonConfig.statData.localCloud.local.program.id)
      // } else if (this.sender.source === 'cloud' && this.acceptor.source === 'local') {
      //   this.addStat(this.CommonConfig.statData.localCloud.cloud.program.id)
      // } else if (this.sender.source === 'local' && this.acceptor.source === 'machine') {
      //   this.addStat(this.CommonConfig.statData.localDevice.local.program.id)
      // } else if (this.sender.source === 'machine' && this.acceptor.source === 'local') {
      //   this.addStat(this.CommonConfig.statData.localDevice.device.program.id)
      // } else if (this.sender.source === 'machine' && this.acceptor.source === 'cloud') {
      //   this.addStat(this.CommonConfig.statData.deviceCloud.device.program.id)
      // } else if (this.sender.source === 'cloud' && this.acceptor.source === 'machine') {
      //   this.addStat(this.CommonConfig.statData.deviceCloud.cloud.program.id)
      // }
      this.$emit('submit')
    },
    // 获取云端路径
    getCloudUrl (item) {
      if (this.acceptor.source === 'cloud') {
        if (item.path.length === 0) {
          return '所有文件/'
        } else {
          let pathArr = item.path.split('/')
          pathArr.shift()
          return '所有文件/' + pathArr.join('/')
        }
      } else {
        return item.path
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.dialog-title.card-title{
  font-size 16px
}
.notice{
  padding 20px 0 18px
  font-size 16px
  line-height 1
}
.send-sure-content{
  display flex
  justify-content space-between
  align-items center
  padding-bottom 20px
  .arrows{
    width 56px
    margin 0 10px
  }
}
.file{
  padding 10px 9px
  border 1px solid #D3D3D3
  border-top none
  border-bottom none
}
ul.file-list{
  li{
    margin-bottom 10px
    padding 0 10px
    height 32px
    line-height 32px
    font-size 14px
    border 1px solid $secondary
    border-radius 6px
    display flex
    justify-content space-between
    align-items center
    &.border-primary{
      border-color $primary
    }
  }
  li:last-child{
    margin-bottom none
  }
}
.dialog-footer{
  padding-bottom 10px
  .btn{
    width 96px
    min-height 32px
    max-height 32px
    box-sizing border-box
  }
}
</style>
